<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressDeliveryManagementLang.Trajectory_info')"
      :visible.sync="Visible"
      width="500px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div v-for="(el,index) in trajectoryList" :key="index">
          <div v-if="!el.is_split" class="contant_box">
            <div v-if="index==trajectoryList.length-1">
              <div class="contant_box_item">
                <div style="width:120px">{{$t('ExpressDeliveryManagementLang.Ticket_number')}}</div>
                <div>{{el.ticket_number}}</div>
              </div>
              <div class="contant_box_item">
                  <div style="width:120px">{{$t('ExpressDeliveryManagementLang.date_issuance')}}</div>
                  <div>{{el.waybill_day_date}}</div>
              </div>
              <div class="contant_box_item">
                  <div style="width:120px">{{$t('ExpressDeliveryManagementLang.Expected_delivery_date')}}</div>
                  <div>{{el.estimate_arrive_day}}</div>
              </div>
            </div>
            <div v-else class="contant_box_item">
                <div style="width:120px">{{$t('ExpressDeliveryManagementLang.Ticket_number_son')}}</div>
                <div>{{el.ticket_number}}</div>
            </div>
            <div class="contant_trajectory">
              <div v-for="(item,k) in el.transport_log_msg" :key="k" :style="{borderLeft:k==el.transport_log_msg.length-1?'0':''}" class="contant_trajectory_box">
                <div v-if="item.code==2" style="background-color:#d4c60a" class="crice">
                    <img style="width: 70%;" src="@/assets/img/Waybill_img/清关.png" alt="">
                </div>
                <div v-else-if="item.code==5" style="background-color:#7f87ff" class="crice">
                    <img style="width: 70%;" src="@/assets/img/Waybill_img/出库.png" alt="">
                </div>
                <div v-else-if="item.code==6" style="background-color:#96ceff" class="crice">
                    <img style="width: 70%;" src="@/assets/img/Waybill_img/出境.png" alt="">
                </div>
                <div v-else-if="item.code==1" style="background-color:#f8ad13" class="crice">
                    <img style="width: 70%;" src="@/assets/img/Waybill_img/运输中.png" alt="">
                </div>
                <div v-else-if="item.code==4" style="background-color:#007aff" class="crice">
                    <img style="width: 70%;" src="@/assets/img/Waybill_img/已运达.png" alt="">
                </div>
                <div v-else-if="item.code==3" style="background-color:#be19ad" class="crice">
                    <img style="width: 70%;" src="@/assets/img/Waybill_img/退货.png" alt="">
                </div>
                <div v-else-if="item.code==9" style="background-color:#19be6b" class="crice">
                    <img style="width: 70%;" src="@/assets/img/Waybill_img/入仓.png" alt="">
                </div>
                <div style="margin-left:1px" class="contant_trajectory_text">
                    <div style="font-size: 12px;    padding:3px 0 5px;">{{item.time}}</div>
                    <div style="font-size: 14px;">{{item.msg}}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="contant_box">
            <div class="contant_box_item">
                <div style="width:120px">{{$t('ExpressDeliveryManagementLang.Ticket_number')}}</div>
                <div>{{el.ticket_number}}</div>
            </div>
            <div class="contant_box_item">
                <div style="width:120px">{{$t('ExpressDeliveryManagementLang.Ticket_opening_time')}}</div>
                <div>{{el.split_time}}</div>
            </div>
            <div v-for="(ite,i) in el.split_ticket_number" :key="i">
              <div class="contant_box_item">
                  <div style="width:120px">{{$t('ExpressDeliveryManagementLang.Split_ticket_number')}}</div>
                  <div>{{ite}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
      Visible: false,
      trajectoryList:[],
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
    init(data) {
      this.Visible = true;
      this.ticket_number=data.ticket_num
      this.getData();
    },
    //获取单条
    getData() {
      this.$get("wayTracks", { ticket_number: this.ticket_number}).then((res) => {
        if(!!res.transport_log&&res.transport_log.length>0){
          if(!!res.transport_log[res.transport_log.length-1].is_split){
            let obj={
                ticket_number:res.waybill_info.ticket_number,
                waybill_day_date:res.waybill_info.waybill_day_date,
                estimate_arrive_day:res.waybill_info.estimate_arrive_day,
                transport_log_msg:[
                    {
                        code:9,
                        msg:this.$t('ExpressDeliveryManagementLang.Entered_warehouse'),
                        time:res.waybill_info.waybill_day_date,
                    }
                ]
            }
            res.transport_log.push(obj)
          }else{
            let obj={
                        code:9,
                        msg:this.$t('ExpressDeliveryManagementLang.Entered_warehouse'),
                        time:res.waybill_info.waybill_day_date,
                    }
            res.transport_log[res.transport_log.length-1].transport_log_msg.push(obj)
          }
          this.trajectoryList = res.transport_log;
        }else{
          this.cancel()
          this.$message.warning(this.$t('ExpressDeliveryManagementLang.no_transpor_data'));
        }
      });
    },
    //取消修改
    cancel() {
      this.trajectoryList=[]
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant{
    border:0;
  }
  .contant_box{
    margin: 20px 0;
    padding: 10px 20px;
    border: 1px solid #639DE3;
    border-radius: 5px;
  }
 .contant_box .contant_box_item{
	color: #444;
	display: flex;
	padding: 4px;
    border-bottom: 1px solid #d6d7d9;
	align-items: center;
  }
 .contant_box .contant_trajectory{
    padding: 20px 10px 0;
  }
 .contant_box .contant_trajectory  .contant_trajectory_box{
    display: flex;
    margin: 0 10px;
    border-left: 1px dotted red;
    position: relative;
    padding: 0 0 10px 20px
  }
 .contant_box .contant_trajectory .crice{
    position: absolute;
    top: 0;
    left: -10px;
    width: 21px;
    height: 21px;
    margin-right: 20px;
    background-color: #f9ae3d;
    border-radius: 100px;
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>